import { camera, scene, renderer } from './utils/init'
import * as THREE from 'three'
// 引入gsap动画库
import gsap from 'gsap'
let mesh
function initBase() {
  const geometry = new THREE.PlaneGeometry(10, 10)
  const meterial = new THREE.MeshStandardMaterial({color: 0xffffff})
  const plane = new THREE.Mesh(geometry, meterial)
  plane.rotation.set(-Math.PI / 2, 0, 0)
  plane.receiveShadow = true
  scene.add(plane)
}


function createLight () {
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
  directionalLight.position.set(3, 3, 3)
  scene.add(directionalLight)
  directionalLight.castShadow = true
  const helper = new THREE.DirectionalLightHelper(directionalLight, 1)
  scene.add(helper)
}

function createSphere (){
  const sphere = new THREE.SphereGeometry(1, 32, 16)
  const material = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
  mesh = new THREE.Mesh(sphere, material)
  mesh.position.set(0, 1, 0)
  mesh.castShadow = true
  scene.add(mesh)
}
camera.position.set(5, 5, 5)

// 球体移动动画
function initAnimation () {
  let moveObj = gsap.to(mesh.position, {
    x: 5, // 修改x属性的延迟
    duration: 1, // 动画的持续时间
    delay: 2, // 多久动物才开始 延迟
    repeat: -1, // 是否有延迟
    yoyo: true, // 动画是否会原路返回
    ease: 'sine.out', // 贝塞尔曲线，动画的移动曲线，先快后慢
    onStart () {
      console.log('开始了');
    },
    onUpdate () {
      console.log('更新了');
    },
    onComplete () {
      console.log('结束了');
    }
  })
  
  // 双击暂停动画/开始动画
  window.addEventListener('dblclick', () => {
    if (moveObj.isActive()) {
      moveObj.pause()
    } else {
      moveObj.resume()
    }
  })
}


renderer.shadowMap.enabled = true
initBase()
createLight()
createSphere()
initAnimation()